<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form
        :inline="true"
        class="demo-form-inline"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item label="学科名称" prop="search">
          <el-input size="small" v-model.trim="searchForm.search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="onReset">清除</el-button>
          <el-button type="primary" size="small" @click="getSubjects()"
            >搜索</el-button
          >
        </el-form-item>
        <el-button
          style="float: right"
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="addSubject"
          >新增学科
        </el-button>
      </el-form>
      <div class="sum">
        <i class="el-icon-info"></i>
        <span>数据一共 {{ counts }} 条</span>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" min-width="48" />
      <el-table-column prop="subjectName" label="学科名称" min-width="144" />
      <el-table-column prop="username" label="创建者" min-width="141" />
      <el-table-column prop="addDate" label="创建日期" min-width="160">
        <template slot-scope="scope">
          {{ scope.row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column label="前台是否显示" min-width="141">
        <template slot-scope="scope">
          {{ scope.row.isFrontDisplay === 1 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="twoLevelDirectory"
        label="二级目录"
        min-width="141"
      />
      <el-table-column prop="tags" label="标签" min-width="141" />
      <el-table-column prop="totals" label="题目数量" min-width="141" />
      <el-table-column min-width="240" label="操作">
        <template slot-scope="scope">
          <el-button @click="subjectTypes(scope.row)" type="text" size="medium"
            >学科分类
          </el-button>
          <el-button type="text" size="medium" @click="subjectTags(scope.row)"
            >学科标签</el-button
          >
          <el-button type="text" size="medium" @click="subjectRevise(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="medium" @click="removeSubject(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
      >
      </el-pagination>
    </div>
    <subjectsAdd ref="dialog" @getSubjects="getSubjects" />
  </el-card>
</template>

<script>
import subjectsAdd from '@/module-hmmm/components/subjects-add'
import { getSubjects, removeSubject } from '@/api/hmmm/subjects'

export default {
  name: 'SubjectsIndex',
  components: {
    subjectsAdd
  },
  data () {
    return {
      tableData: [],
      searchForm: {
        search: ''
      },
      page: 1, // 页数
      pageSize: 10, // 每页个数
      counts: 0, // 总数
      currentPage: 1
    }
  },
  created () {
    this.getSubjects()
  },
  methods: {
    async getSubjects () {
      try {
        const { data } = await getSubjects({
          subjectName: this.searchForm.search,
          page: this.page,
          pagesize: this.pageSize
        })
        this.counts = data.counts
        this.tableData = [...data.items]
      } catch (err) {
        this.$message.error('获取列表失败！')
      }
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getSubjects()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getSubjects()
    },
    onReset () {
      this.$refs.searchForm.resetFields()
      this.getSubjects()
    },
    addSubject () {
      this.$refs.dialog.dialogVisible = true
    },
    subjectTypes (row) {
      this.$router.push({
        name: 'subjects-directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    subjectTags (row) {
      this.$router.push({
        name: 'tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    subjectRevise (row) {
      this.$refs.dialog.onRevise(row)
    },
    removeSubject (row) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeSubject(row)
        await this.getSubjects()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.box-card {
  padding: 15px;

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .el-card__header {
    border: none;
    padding: 0;

    .demo-form-inline {
      height: 51px;
    }
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .demo-form-inline {
    padding-left: 10px;
  }

  .sum {
    height: 35px;
    padding: 5px 16px;
    margin-bottom: 10px;
    color: #909399;
    background-color: #f4f4f5;
    line-height: 24px;

    span {
      font-size: 13px;
      margin-left: 8px;
    }
  }

  .el-card__body {
    padding: 0;
  }

  .block {
    float: right;
    margin-top: 20px;
  }
}
</style>
